#bj {
	width: 100%;
	top: -20px;
	position: relative;
	.bjt {
		width: 100%;
		height: auto;
		.bj1111 {
			width: 100%;
			height: auto;
		}
	}

	.tiao {
		width: 30px;
		margin: 0 auto;
		animation-duration: 4s;

		img {
			width: 100%;
			height: auto;
			top: -60px;
			display: flex;
			position: relative;
			margin: 0 auto;
		}
	}
	@media screen and(max-width:780px) {
		.bjt {
			width: 100%;
			height: auto;
			.bj1111 {
				width: 100%;
				height: 210px;
			}
		}
	}
}

.one {
	width: 100%;
	// height: 300px;
	top: -43px;
	position: relative;

	
	.h1 {
		// animation-delay: 0s;
		// animation-duration: 3s;
		width: 80%;
		margin: 0 auto;
		text-align: center;
		h1 {
			font-weight: normal;
			font-size: 3rem;
		}
	}
	.p {
		text-align: center;
		// animation-duration: 3s;
		p {
			margin: 10px 0;
		}
	}
	.one1 {
		width: 80%;
		height: 200px;
		// background-color: aqua;
		// text-align: center;
		margin: 33px auto;
		display: flex;
		box-shadow: 5px 5px 5px #888888, -4px -1px 10px #888888;

		.yi {
			// animation-timing-function: linear;
			animation-duration: 3s;
			display: grid;
			align-content: space-around;
			text-align: center;
			width: 25%;
			margin-top: 10px;
			.biaot {
				font-weight: bold;
				font-size: 2rem;
			}
		}
		.yii {
			// animation-duration: 3s;
			background-color: #55aaff;
			display: grid;
			align-content: space-around;
			text-align: center;
			width: 25%;
			// margin-top: 10px;
			.biaot {
				font-weight: bold;
				font-size: 2rem;
			}
		}
	}
	@media screen and(max-width:780px) {
		.h1 {
			animation-delay: 0s;
			animation-duration: 3s;
			width: 80%;
			margin: 0 auto;
			text-align: center;
			h1 {
				font-weight: normal;
				font-size: 2rem;
			}
		}
		.p {
			text-align: center;
			animation-duration: 3s;
			p {
				margin: 10px 0;
			}
		}
		.one1 {
			display: flex;
			flex-direction: column;
			position: relative;
			text-align: center;
			/* margin: 20px 0; */
			height: 100%;
			width: 100%;
	
			.yi {
				// animation-timing-function: linear;
				// animation-duration: 3s;
				// display: grid;
				align-content: space-around;
				text-align: center;
				width: 100%;
				margin-top: 15px; 
				line-height: 40px;
				.biaot {
					font-weight: bold;
					font-size: 2rem;
				}
			}
			.yii {
				animation-duration: 3s;
				background-color: #55aaff;
				// display: grid;
				// align-content: space-around;
				text-align: center;
				width: 100%;
     			 line-height: 39px;
				.biaot {
					font-weight: bold;
					font-size: 2rem;
				}
			}
		}
	}
}
#two {
	margin: 30px auto;
	width: 100%;
	height: auto;
	background-color: #f3f3f3;

	.tiat2 {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		.p1 {
			animation-duration: 3s;
			padding-top: 20px;
			flex-wrap: wrap;
			font-size: 2rem;
			font-weight: bold;
		}
		.p2 {
			animation-duration: 3s;
			margin-top: 20px;
			flex-wrap: wrap;
			
		}
	}
	.two1 {
		width: 80%;
		margin: 0 auto;
		margin-top: 20px;
		// position: relative;
		// flex-wrap: wrap;
		// display: flex;
		// justify-content: space-around;
		.t1 {
			display: flex;
			width: 100%;

			.img1 {
				width: 33%;

				img {
					width: 100%;
					height: 100%;
				}
				
			}
			.img2 {
				width: 64%;
				margin-left: 30px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.t2 {
			display: flex;
			width: 100%;
			margin-top: 20px;
			
			
		
			.img33 {
				
				width: 33%;
				.img3{
					width: 100%;
					img {
						width: 100%;
						
					}
				}
				
			}
			.img4 {
				display: flex;
				width: 65%;
				margin-left: 30px;
				.img5{
					width: 48%;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.img6{
					width: 48%;
					img{
						margin-left: 30px;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	@media screen and(max-width:780px) {
		.tiat2 {
			width: 80%;
			margin: 0 auto;
			text-align: center;
			.p1 {
				animation-duration: 3s;
				padding-top: 20px;
				flex-wrap: wrap;
				font-size: 2rem;
				font-weight: bold;
			}
			.p2 {
				animation-duration: 3s;
				margin-top: 20px;
				flex-wrap: wrap;
				font-size: 1.5rem;
			}
		}
		.two1 {
			width: 80%;
			margin: 0 auto;
			margin-top: 20px;
			// position: relative;
			// flex-wrap: wrap;
			// display: flex;
			// justify-content: space-around;
			.t1 {
			    flex-flow: wrap;
				width: 100%;
	
				.img1 {
					width: 100%;
	
					img {
						width: 100%;
						height: 97%;
					}
					
				}
				.img2 {
					width: 100%;
					margin-left: 0;
			
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.t2 {
			
				width: 100%;
		flex-wrap: wrap;
		margin: 10px 0;
				
				
			
				.img33 {
					
					width: 100%;
				
					.img3{
						width: 100%;
						img {
							width: 100%;
							
						}
					}
					
				}
				.img4 {
				
					// display: flex;
					flex-wrap: wrap;
					width: 100%;
					margin-left: 0;
					.img5{
						margin: 10px 0;
						width: 100%;
						flex-wrap: wrap;
						margin-left: 0;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.img6{
						
						width: 100%;
						
						img{
							margin-left: 0;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		
	}
}

#thrre {
	width: 100%;
	position: relative;
	// margin-top: 300px;

	.tiat2 {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		.p1 {
			padding-top: 20px;
			flex-wrap: wrap;
			font-size: 2rem;
			font-weight: bold;
		}
		.p2 {
			margin-top: 20px;
			flex-wrap: wrap;
		}
	}
	.tiat3 {
		// margin-top: 50px;
		margin: 50px auto;
		display: flex;
		justify-content: center;
		.tt {
			.sju {
				text-align: center;
				margin: 0 40px;
				font-size: 3rem;
				font-family: fantasy;
			}
			div {
				margin: 0 40px;
			}
		}
	}

	
	@media screen and(max-width:780px) {
		.tiat3 {
			// margin-top: 50px;
			margin: 50px auto;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.tt {
				width: 50%;
				line-height: 46px;
				.sju {
					text-align: center;
					margin: 0 40px;
					font-size: 3rem;
					font-family: fantasy;
				}
				div {
					// margin: 0 40px;
					text-align: center;
    				margin: 0 40px;
				}
			}
		}
	
	}
}

#four {
	height: 100%;
	.tiat4 {
		.biaot1 {
			text-align: center;
			margin-top: -270px;
			color: white;
			.b1 {
				font-size: 2rem;
				font-weight: bold;
			}
			.b2 {
				line-height: 40px;
				font-size: 1rem;
			}
		}
		.imgs {
			display: flex;
			justify-content: center;
			width: 96%;
			height: auto;
			display: flex;
			margin-top: 40px;
			// margin: 40px auto;
		
		}
	}
	
	// #new.bjs.max .one img:hover{
	// 	transform: scale(1.1);
	// 	overflow:hidden;
	// }
	@media screen and(max-width:780px) {
		.tiat4 {
			.biaot1 {
				text-align: center;
				margin-top: -270px;
				color: white;
				.b1 {
					font-size: 1.5rem;
					font-weight: bold;
				}
				.b2 {
					line-height: 28px;
					margin-top: 10px;
					font-size: 1rem;
				}
			}
			.imgs {
			    justify-content: center;
				width: 100%;
				height: auto;
				display: flex;
			
				flex-direction: column;
				div{
					margin-top: 10px;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

#news{
	height: auto;
	.tiat2 {
		text-align: center;
		width: 50%;
	
		/* position: relative; */
		margin: 20px auto;
		
		color: rgb(187, 187, 187);
		.p1 {
			font-size: 3rem;
			font-weight: bold;
		}
		.p2 {
			line-height: 40px;
			font-size: 1rem;
		}
	}
	.bjs {
		height: auto	;
		margin: 0 auto;
		width: 94%;
		background-color: #55aaff;
		
		.max {
			margin: 50px auto;
			display: flex;
			width: 90%;
			height: auto;
			.one {
				margin: 80px auto;
				width: 22%;
				height: auto;
				overflow:hidden;
				.p1 {
					background-color: white;
					font-size: 1.5rem;
					text-align: center;
					line-height: 50px;
				}
				.p2 {
					background-color: white;
					color: #5f5f5f;
					font-size: 1rem;
					height: 145px;
				}

				img {
					overflow:hidden;
					width: 100%;
					height: 100%;
				}
				img:hover{
					transform: scale(1.1);
					overflow: hidden;
				}
			}
		}
	}
	@media screen and(max-width:780px) {
		.tiat2 {
		
			width: 90%;
		}
		.bjs {
			height: 425px;
			margin: 0 auto;
			width: 94%;
			background-color: #55aaff;
			margin-bottom: 20px;
			
			.max {
				margin: 0 auto;
				height: 511px;
				display: flex;
				width: 99%;
				flex-wrap: wrap;
			
				align-content: center;
				.one {
					width: 48%;
					display: flex;
					flex-wrap: wrap;
					margin: 5px auto;
					display: flex;
					flex-wrap: wrap;
					.p1 {
						background-color: white;
						font-size: 1.5rem;
						text-align: center;
						line-height: 50px;
						width: 100%;
					}
					.p2 {
						background-color: white;
						color: #5f5f5f;
						font-size: 1rem;
						height: auto;
						display:-webkit-box;
						overflow:hidden;
						text-overflow:ellipsis;
						-webkit-line-clamp:2;
						-webkit-box-orient:vertical;
					}
	
					img {
						overflow:hidden;
						width: 100%;
						height: 100%;
					}
					img:hover{
						transform: scale(1.1);
						overflow: hidden;
					}
				}
			}
		}
	}
}


// -------------------------------
#ding{
	width: 100%;
	height: 400px;
	img{
		position: relative;
		width: 100%;
		height: 100%;
		top: -20px;
	}
	.title{
		display: flex;
		text-align: center;
			display: block;
			position: relative;
			top: -245px;
			font-size: 3rem;

		color: rgb(255, 255, 255);
		span{
			font-size: 2rem;
			color:white;
		}
	}
	@media screen and(max-width:780px) {
		height: 200px;
		img{
			position: relative;
			width: 100%;
			height: 100%;
			top: -20px;
		}
		.title{
			display: flex;
			text-align: center;
				display: block;
				position: relative;
				top: -145px;
				font-size: 2rem;
	
			color: aqua;
			span{
				font-size: 1rem;
				color:white;
			}
		}
	}
}
#commend{
	.container{
		.title1{
			margin-top: 25px;
			font-size: 3rem;
			span{
				font-size: 1.5rem;
			}
		}
		.max{
			display: flex;
			justify-content: space-evenly;
			flex-wrap:wrap;
			flex-direction: row;
			align-items: baseline;
			width: 100%;
			height: auto;
			margin-top: 100px;

			.one{
			
				width: 23%;
				height: auto;
				.tp1{
				
				overflow:hidden;
				
				

				.img{
					width: 100%;
					height: auto;
					
				

					
					img{
					width: 100%;
					height: 100%;
				}
				}
				
				
				
			}
    .p{
				width: 100%;
				height: 50px;
				margin-top: -10px;
				// background-color: #f1f7fc;
				text-align: center;
				
				p{
					line-height: 55px;
					border: #ddd 1px solid;
					line-height: 4rem;
				}
			}
			}
			
			
			
		}
		.max .tp1 .img img:hover{
			cursor: pointer;
			transition: all 0.6s;
		
			transform: scale(1.1);
			
		}
	}
	@media screen and(max-width:780px) {
		.container{
			.title1{
			    // margin-top: 25px;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
				span{
					font-size: 1.5rem;
				}
			}
			.max{
				display: flex;
				justify-content: space-evenly;
				flex-wrap:wrap;
				flex-direction: row;
				align-items: baseline;
				width: 100%;
				height: auto;
				margin-top: 100px;
	
				.one{
				
					width: 48%;
					height: auto;
					
				}
				
				
				
			}
			.max .tp1 .img img:hover{
				cursor: pointer;
				transition: all 0.6s;
			
				transform: scale(1.1);
				
			}
		}
	}
}

#internal{
	.container{
		.title2{
			p{
				margin-top: 25px;
			font-size: 3rem;
			
			span{
				font-size: 1.5rem;
			}
			}
			
		}
		.guangdo{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap:wrap;
			margin: 48px 0;
			
			.div{
				width: 32%;
				.one{
				overflow: hidden;
				width: 100%;
				height: auto;
				margin: 1rem 10px;
				&:hover{
					.names{
						cursor: pointer;
			transition: all 0.4s;
						display: none;
					}
				}
				
			
				.img2{
					img{
						width: 100%;
						height: 100%;
					}
				}
				.names{
					position: relative;
					background-color: #020202;
					opacity: 0.5;
					
					
					p{
					width: 100%;
					height: auto;
				
					font-size: 3rem;
					text-align: center;
					margin-top: -46px;
					color: white;
					
				}
				}
		
				
			}
			.p1{
				display: none;
			}
			
			}
		
		}
		.guangdo .one  :hover {
			cursor: pointer;
			transition: all 0.8s;
			transform: scale(1.08);	

			
		}

	}
	@media screen and(max-width:780px) {
		margin: 48px -10px;
		.container{
			.title2{
				p{
					font-size: 2rem;
					display: flex;
					flex-direction: column;
				span{
					font-size: 1.5rem;
				}
				}
				
			}
			.guangdo{
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap:wrap;
				margin: 48px 0;
				
				.div{
					width: 48%;
					margin: 22px auto;
					.one{
						
						overflow: hidden;
						width: 100%;
						height: auto;
						&:hover{
							.names{
								cursor: pointer;
					 transition: all 0.4s;
								display: none;
							}
						}
						
					
						.img2{
							img{
								width: 100%;
								height: 100%;
							}
						}
						.names{
							position: relative;
							background-color: #020202;
							opacity: 0.5;
							
							
							p{
							display: none;
						
							font-size: 3rem;
							text-align: center;
							margin-top: -46px;
							color: white;
							
						}
						}
					
						
					}	

						.p1{
							display: block;
							margin-top: -35px;
							width: 100%;
					.h1{
						font-size: 2rem;
						margin: 2px auto;
						text-align: center;
					}
					.h2{
						font-size: 1rem;
						margin: 5px 20px;
					}
				}
				}
				
			
			}
			.guangdo .one  :hover {
				cursor: pointer;
				transition: all 0.8s;
				transform: scale(1.08);	
	
				
			}
		
	
		}	

		
	}
	
}

#freely{
	.container{
		.title3{
			p{
				margin-top: 25px;
			font-size: 3rem;
			
			span{
				font-size: 1.5rem;
			}
			}
		}
		.max{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20px;
			.freelys{
				margin-top: 30px;
				width: 48%;
				display: flex;
				justify-content: space-between;
				.img{
					width: 230%;
					overflow:hidden;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.bt{
					margin-left: 20px;
					line-height: 25px;
					.t1{
						font-size: 2rem;
						font-weight: bolder;

					}
					.t2{
						font-size: 1rem;
						display:-webkit-box;
						overflow:hidden;
						// text-overflow:ellipsis;
						-webkit-line-clamp:3;
						-webkit-box-orient:vertical;
					}
				}
			
			}
			.freelys .img :hover{
				cursor: pointer;
			transition: all 0.8s;
			transform: scale(1.08);	
			}
		}
	}
	@media screen and(max-width:780px) {
		.container{
			.title3{
				display: flex;
				flex-direction: column;
				p{
					margin-top: -10px;
				   font-size: 2rem;
				
				span{
					font-size: 1.5rem;
				}
				}
			}
			.max{
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 20px;
				.freelys{
				    margin-top: 30px;
  					  width: 100%;
					.img{
						width: 230%;
						overflow:hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.bt{
						margin-left: 20px;
						line-height: 25px;
						.t1{
							font-size: 2rem;
							font-weight: bolder;
	
						}
						.t2{
							font-size: 1rem;
							display:-webkit-box;
							overflow:hidden;
							// text-overflow:ellipsis;
							-webkit-line-clamp:3;
							-webkit-box-orient:vertical;
						}
					}
				
				}
				.freelys .img :hover{
					cursor: pointer;
				transition: all 0.8s;
				transform: scale(1.08);	
				}
			}
		}
	}
}

// ---------------------------------

#zixun{
	margin-top: 50px;
	.container{
		.bt{
			width: 100%;
			text-align: center;
			line-height: 50px;
		
			.p1{
				font-weight: bolder;
				font-size: 2rem;
			}	
			.p2{
				width: 80%;
				margin: auto;
			}
		}
		.max{
			display: flex;
			justify-content: space-between;
			margin-top: 30px;
			margin-bottom: 30px;
			.img{
				width: 50%;

			}
			.list{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.lists{
					// margin: 30px;
					width: 100%;
					
				
					margin-left: 20px;
				
					display: flex;
					justify-content: space-between;


					.p{
						
						width: 15%;
						height: 70px;
						background-color: #55aaff;
						color: #f3f3f3;
						.p1{
						margin-top: 10px;
						font-weight: bold;
						font-size: 2rem;
						text-align: center;
					}
					.p2{
						text-align: center;
					}
					}
					
				}
				.t{
					cursor:pointer;
					width: 80%;
					line-height: 23px;

					
					.t2{	
							font-size: 1rem;
							color: #999;
							display:-webkit-box;
							overflow:hidden;
							text-overflow:ellipsis;
							-webkit-line-clamp:2;
							-webkit-box-orient:vertical;
					}
				}
			}
		}
		.max .list   :hover{
			background-color: rgb(222, 222, 222);
			transition: all 0.6s;
		}
	}
	@media screen and(max-width:780px) {
		.container{
			.bt{
				width: 100%;
				text-align: center;
				line-height: 50px;
				
			
				.p1{
					font-weight: bolder;
					font-size: 2rem;
				}	
				.p2{
					width: 100%;
					margin: auto;
					line-height: 25px;
				}
			}
			.max{
				display: flex;
				justify-content: space-between;
				margin-top: 30px;
				margin-bottom: 30px;
				flex-direction: column;
				.img{
					width: 100%;
	
				}
				.list{
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.lists{
						// margin: 30px;
						width: 95%;
						
					    margin: 10px auto;
						// margin-left: 20px;
					
						display: flex;
						justify-content: space-between;
	
	
						.p{
							
							width: 22%;
							height: 70px;
							background-color: #55aaff;
							color: #f3f3f3;
							.p1{
							margin-top: 10px;
							font-weight: bold;
							font-size: 2rem;
							text-align: center;
						}
						.p2{
							text-align: center;
						}
						}
						
					}
					.t{
						cursor:pointer;
						width: 100%;
						line-height: 23px;
	
						.t1{
							font-size: 1rem;
						}
						.t2{	
								font-size: 1rem;
								color: #999;
								display:-webkit-box;
								overflow:hidden;
								text-overflow:ellipsis;
								-webkit-line-clamp:2;
								-webkit-box-orient:vertical;
						}
					}
				}
			}
			.max .list   :hover{
				background-color: rgb(222, 222, 222);
				transition: all 0.6s;
			}
		}
	}
}

//-------------------------------
#raiders{
	.container{
		.bt{
			width: 100%;
			text-align: center;
			line-height: 50px;
		
			.p1{
				font-weight: bolder;
				font-size: 2rem;
			}	
			.p2{
				width: 80%;
				margin: auto;
			}
		}
		.max{
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			
			.raiders1{
				width: 30%;
				margin: 10px 0;
				.img{
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.title{
					margin-top: 10px;
					line-height: 23px;
				
					.t2{
						font-size: 1rem;
							color: #999;
							display:-webkit-box;
							overflow:hidden;
							text-overflow:ellipsis;
							-webkit-line-clamp:2;
							-webkit-box-orient:vertical;

					}
				}
			}
		}
		.max .img :hover{
			cursor: pointer;
			transition: all 0.8s;
			transform: scale(1.08);	
		}
	}
	@media screen and(max-width:780px) {
		.container{
			.bt{
				width: 100%;
				text-align: center;
				line-height: 50px;
				margin-bottom: 40px;
			
				.p1{
					font-weight: bolder;
					font-size: 2rem;
				}	
				.p2{
				    width: 100%;
				
					line-height: 25px;
				}
			}
			.max{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				flex-wrap: wrap;
				
				.raiders1{
					width: 48%;
					margin: 10px 0;
					.img{
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.title{
						margin-top: 10px;
						line-height: 23px;
						.t1{
							font-size: 1rem;
						}
					
						.t2{
							font-size: 1rem;
								color: #999;
								display:-webkit-box;
								overflow:hidden;
								text-overflow:ellipsis;
								-webkit-line-clamp:2;
								-webkit-box-orient:vertical;
	
						}
					}
				}
			}
			.max .img :hover{
				cursor: pointer;
				transition: all 0.8s;
				transform: scale(1.08);	
			}
		}
	}
}


// -------------------------------------关于我们
#team{
	.container{
		.title{
			padding: 0;
			margin: 0;
			margin-top: 85px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			margin-bottom: 30px;
			.p{
				text-align: center;
				padding-top: 40px;
				.p1{
					font-size: 3rem;
				}
				.p2{
					font-size: 2rem;
					color: rgb(108, 108, 108);
				}
			}
			.content{
				width: 80%;
				text-align: center;
				margin: 40px auto;
			}
		}

		.max{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.imgs{
				width: 23%;
				margin:15px 0;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.max .imgs :hover{
			cursor: pointer;
			transition: all 0.5s;
			transform: scale(1.1);	

		}

		.message{
			margin-top: 60px;
			display: flex;
			justify-content: space-between;
		
			.messages{
				width: 24%;
				border: #dedede 1px solid;
				margin-bottom: 50px;
				
				.img{
					margin:20px 0;
					text-align: center;
					
				}
				.titles{
					line-height: 30px;
					width: 90%;
					margin: 0 auto;
					text-align: center;
					margin-bottom: 30px;
					p{
						text-align: center;
						font-size: 2rem;
					}
					span{
						margin-top: 10px;
						text-align: center;
					}
				}
			}
		}
	}
	@media screen and(max-width:780px) {
		.container{
			.title{
				padding: 0;
				margin: 0;
				margin-top: 85px;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				margin-bottom: 30px;
				.p{
					text-align: center;
					padding-top: 40px;
					.p1{
						font-size: 2rem;
					}
					.p2{
						font-size: 1rem;
						color: rgb(108, 108, 108);
					}
				}
				.content{
					width: 100%;
					text-align: center;
					margin: 40px auto;
				}
			}
	
			.max{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.imgs{
					width: 48%;
					margin: 8px 0;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.max .imgs :hover{
				cursor: pointer;
				transition: all 0.5s;
				transform: scale(1.1);	
	
			}
	
			.message{
				margin-top: 60px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			
				.messages{
					width: 48%;
					border: #dedede 1px solid;
					margin-bottom: 50px;
					
					.img{
						margin:20px 0;
						text-align: center;
						
					}
					.titles{
						line-height: 30px;
						width: 90%;
						margin: 0 auto;
						text-align: center;
						margin-bottom: 30px;
						p{
							text-align: center;
							font-size: 2rem;
						}
						span{
							margin-top: 10px;
							text-align: center;
						}
					}
				}
			}
		}
	}
}

// ===============================
#customer{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
	margin-top: 8rem;
	border-top: 1px solid #ccc;
	padding-top: 6rem;
	.csinfor{
		width: 40%;
		margin-left: 8%;
		display: flex;
		justify-content: space-evenly;
		margin-top: 20px;
		.cs1{
			.cheng{
				// line-height: 30px;
				p{
					box-sizing: border-box;
					color: rgb(51, 51, 51);
					font-family: "Microsoft YaHei";
					font-size: 16px;
					line-height: 60px;
				}
				h2{
					box-sizing: border-box;
					font-family: "Microsoft YaHei";
					color: rgb(102, 102, 102);
					font-weight: bold;
					font-size: 25px;
					line-height: 30px;
				}
			}
			.imgs{
				margin-top: 80px;
			}
		}
	}
	.img{
		width: 50%;
		img{
			width: 100%;
			height: 100%;
		}
	}
	@media screen and(max-width:780px) {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50px;
		margin-top: 8rem;
		border-top: 1px solid #ccc;
		padding-top: 6rem;
		flex-direction: column-reverse;
		.csinfor{
			width: 100%;
			/* margin-left: 8%; */
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			flex-direction: row;
			margin: 18px 24px;
			.cs1{
				width: 100%;
				.cheng{
					// line-height: 30px;
					p{
						box-sizing: border-box;
						color: rgb(51, 51, 51);
						font-family: "Microsoft YaHei";
						font-size: 16px;
						line-height: 60px;
					}
					h2{
						box-sizing: border-box;
						font-family: "Microsoft YaHei";
						color: rgb(102, 102, 102);
						font-weight: bold;
						font-size: 20px;
						line-height: 30px;
					}
				}
				.imgs{
					margin-top: 80px;
				}
			}
		}
		.img{
			width: 100%;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
}


#mapmessage{
	display: flex;
	justify-content: space-evenly;
	// height: 500px;
	margin-bottom: 50px;
	.map{
		width: 50%;
		height: 50rem;

	}
	.message{
		width: 50%;
		h1{
			text-align: center;
		}
		.liuyan{
			margin-left: 20px;
			
			textarea{
				width: 90%;
				background-color: #f5f5f5;
				border: none;
			}
			input{
				width: 90%;
				height: 55px;
				line-height: 10px;
				margin: 5px auto;
				background-color: #f5f5f5;
				border: none;
			}
			.tj{
				background-color: #55aaff;
			}
		}
	}
	@media screen and(max-width:780px) {
		display: flex;
		flex-direction: column-reverse;
	// height: 500px;
	margin-bottom: 50px;
		.map{
			width: 95%;
			margin: 0 auto;
			height: 50rem;
	
		}
		.message{
			width: 105%;
			margin-bottom: 30px;
			
		}
	}
}